import React from "react";
import {connect} from 'react-redux';

class ReactReduxDemo extends React.Component {
    handlePlus = (event) => {
        this.props.dispatch({type:"+1"}); //dispatch方法是父组件Provider传进来的
    }

    handleMinus = (event) => {
        this.props.dispatch({type:"-1"});
    }

    render() {
        return (
            <div className="container" style={{paddingTop:30}}>
                <p>{this.props.state}</p> {/*state值是父组件Provider传进来的*/}
                <br/>
                <button type="button" onClick={this.handlePlus}>+1</button>
                <button type="button" onClick={this.handleMinus}>-1</button>
            </div>
        );
    }
}

export default connect((state) => {
    return {"state": state}; //mapStateToProps，指定数据映射绑定策略，将“Provider组件”中的“状态state”以指定“映射策略”传递到“目标组件”ReactReduxDemo中props参数上（子组件的构造函数）
},
    null //函数绑定mapDispatchToProps略
)(ReactReduxDemo) //建立“Provider组件”与“目标组件”ReactReduxDemo的关联
